<template>
    <div>
        <form>
            <p><span>账号:</span><input v-model="username" placeholder="用户名"></p>
            <p><span>密码:</span><input v-model="password" placeholder="密码"></p>
            <p><button @click="login">登录</button></p>
            <h1 v-if="login">登录成功</h1>
            <h1 v-else>登录失败</h1>
        </form>
    </div>
    <div v-bind:id="123">
        <p>这是一行文字</p>
    </div>
    <a href="https://www.baidu.com" target="_blank" rel="noopener">百度一下</a>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>身份证号</td>
                </tr>
            </thead>
            <tbody class="login">
                <tr v-for="user in users" :key="user.gmsfhm">
                    <td>{{ user.name }}</td>
                    <td>{{ user.gmsfhm }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import axios from 'axios';

export default {
    name: 'Login',
    props: {
        
    },
    data() {
        return {
            users: [{name: 'zhangsan', gmsfhm: '123'},{name: 'lisi', gmsfhm: '456'}]
        }
    },
    methods: {
        login() {
            const url = 'http://localhost:8000/user_info/sout';
            const param = {
                username: this.username,
                password: this.password
            };
            axios.post(url, param)
            .then(response => {
                if(response.data.success){
                    alert(1)
                }
                alert(response.data.data.username)
            })
            .catch(error => {
                alert(error)
            })
        }
    }
}

</script>
<style>
    .login {
        color: red;
        font-size: 20px;
    }
    .table{
        justify-content: center;
    }
</style>